<template>
  <table border="1">
    <thead>
        <tr>
        <td>权益编号</td>
        <td>权益名称</td>
        <td>权益信息</td>
        <td>是否自定义权益</td>
        <td>权益使用规则</td>
        <td>权益类型</td>
    </tr>
    </thead>
    <tbody v-for="init in ShowInfo">
        <tr>
        <td>{{ init.MR_Id }}</td>
        <td>{{ init.MR_Name }}</td>
        <td>{{ init.MR_Info }}</td>
        <td>{{ init.MR_IsCoustom }}</td>
        <td>{{ init.MR_Rule }}</td>
        <td>{{ init.MR_Rights }}</td>
        <td><input type="button" value="修改" @click="xiugia(init.MR_Id)"></td>
        <td><input type="button" value="删除" @click="shanchu(init.MR_Id)"></td>
    </tr>
    </tbody>
<span>
    <a href="#" @click="page('F')">首页</a>
    <a href="#" @click="page('S')">上一页</a>
    <a href="#" @click="page('N')">下一页</a>
    <a href="#" @click="page('W')">尾页</a>
   跳转到 <input type="text" v-model="tz">
   <input type="button" value="go" @click="tiaozhuan">
</span>
  </table>
</template>

<script setup lang="ts">
   import {ref,onMounted} from 'vue';
   import { useRouter } from 'vue-router';

    import axios from 'axios';
    const userour=useRouter();

    const tz=ref("");
const fenye=ref({
    pageindex:1,
     pageSize:1,
    TitalCount:1,
    PageCount:1,
})
onMounted(()=>{
    Show();
})
//分页
const page=(q:string)=>{
    switch(q){
        case'F':
        fenye.value==1;
      
        break;
        case'S':
        if(fenye.value.pageinde>1){
           
            ShowInfo.value.pageindex--;
        }else{
            alert("已经是第一页了");
        
        }  
        break;
        case 'N':
            if(fenye.value.pageindex<fenye.value.PageCount){
                    fenye.value.pageindex++

            }else{
                alert("已经是最后一页了")
            }
            break;
            case 'W':
            fenye.value.pageindex=fenye.value.PageCount
            break;
    }Show();
}
//显示字段
const ShowInfo=ref([{
  
     "MR_Id": 1,
      "MR_Name": "",
      "MR_Info": "",
      "MR_IsCoustom": true,
      "MR_Rule": "",
      "MR_Rights": 0
}])
  //显示方法
    const Show=()=>{
        axios.get("https://localhost:7153/api/Member/ShowPage",
        {
            params:{
                 pageindex:fenye.value.pageindex,
                 pageSize:fenye.value.pageSize
            }
        })
        .then(res=>{
            console.log(res);

            ShowInfo.value=res.data.Data_Info;
            fenye.value.TitalCount=res.data.TitalCount;
            fenye.value.PageCount=res.data.PageCount;
        })
    }
    //翻页
    const tiaozhuan=()=>{
        var fy=tz.value;
        if(fy==""){
            alert("页数不能为空");
        
        return;
    }
        if(fy<0){
            alert("页数不能小于0");return;
        }
        if(Number(fy)>fenye.value.PageCount){
            alert("页数不能大于总页数");return;
        }

        fenye.value.pageindex=Number(fy);
        Show();
        
    }
    const xiugia=(MR_Id:number)=>{
        userour.push({
            name:"UpdaMemberRight",
            params:{
                id:MR_Id
            }
        })
    }
    const shanchu=(MR_Id:number)=>{
        if(confirm("确定删除吗?")){
        axios.delete("https://localhost:7153/api/Member/DelMember",{
            params:{
                id:MR_Id
            }
        }).then(res=>{
             if(res.data>0){
                    alert('删除成功');
                }else{
                    alert("删除失败")
                }
        })
    }
}
</script>

<style scoped>

</style>